<template>
	<view class="normal-login-container">
		<div class="mox">商城</div>
		<!-- 横向滑动切换 -->
		<scroll-view class="switch-scroll" scroll-x="true" scroll-with-animation scroll-left="0">
			<div class="switch">
				<div v-for="(tab, index) in tabs" :key="index" :class="{ 'active': goods_cate_id === tab.goods_cate_id }"
					@click="switchTab(tab.goods_cate_id)">
					{{ tab.goods_cate_name }}
				</div>
			</div>
		</scroll-view>
		
		<!-- 商品列表 -->
		<view class="product-list-container">
			<view class="product-list">
				<view @click="fun(item)" v-for="(item, index) in products" :key="index" class="product-item">
					<image class="product-image" :src="item.goods_cover_path" mode="aspectFill"></image>
					<view class="product-info">
						<text class="product-title">{{item.goods_name}}</text>
						<text class="product-price">¥{{item.goods_price}}</text>
					</view>
				</view>
			</view>
			
			<!-- 加载更多提示 -->
			<view class="load-more" v-if="loading">
				<view class="loading-icon"></view>
				<text>{{loadText}}</text>
			</view>
			<view class="no-more" v-if="noMore">没有更多数据了</view>
		</view>
		<div style="width: 100%;height: 80px;"></div>
		<!-- 定位购物车图标 -->
		<div class="cart-fixed" @click="tiaozhuan()">
			<img src="https://shalong.taiyanyue.top/images/riFill-shopping-cart-2-fil1.png" alt="购物车" />
			<view v-if="cartCount > 0" class="cart-count">{{cartCount}}</view>
		</div>
		
		<custom-tabbar :current="currentTabIndex" />
	</view>
</template>

<script>
	import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue';
    import {
    	goods_getHomeGoodsCateList, goods_getIndexGoodsListByCateId,goods_getShoppingCartList
    } from '@/api/system/user.js'
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {
				currentTabIndex: 2,
				currentTab: 0,
				tabs: [],
				cartCount: 0, // 购物车商品数量
				goods_cate_id: 0,
				products: [],
				// 分页相关参数
				page: 1,
				size: 10,
				loading: false,
				noMore: false,
				count: 0,
				// 防止重复请求
				canLoad: true
			}
		},
		created() {
			// 分类
			this.goods_getHomeGoodsCateList()
			// 列表
			this.goods_getIndexGoodsListByCateId()
			
		},
		onReachBottom() {
			// 滚动到底部加载更多
			if (!this.noMore && this.canLoad) {
				this.loadMore();
			}
		},
		onShow() {
			const token = uni.getStorageSync('token');
			// 购物车数量
			if(token){
				this.goods_getShoppingCartList()
			}
		},
		methods: {
			async goods_getShoppingCartList(){
				const data = await goods_getShoppingCartList();
				this.cartCount = data.content.count;
			},
			// 分类
			async goods_getHomeGoodsCateList() {
				const data = await goods_getHomeGoodsCateList({page:1,size:99999});
				console.log(data)
				this.tabs = data.content.data;
				this.tabs.unshift({goods_cate_id: 0, goods_cate_name: '全部'})
			},
			
			async goods_getIndexGoodsListByCateId() {
				if (!this.canLoad) return;
				
				this.loading = true;
				this.canLoad = false;
				
				try {
					const data = await goods_getIndexGoodsListByCateId({
						page: this.page,
						size: this.size,
						goods_cate_id: this.goods_cate_id
					});
					
					// 如果是第一页，直接赋值
					if (this.page === 1) {
						this.products = data.content.data;
					} else {
						// 否则合并数据
						this.products = [...this.products, ...data.content.data];
					}
					
					// 更新总条数
					this.count = data.content.count || 0;
					
					// 判断是否还有更多数据
					if (this.products.length >= this.count || data.content.data.length < this.size) {
						this.noMore = true;
					} else {
						this.noMore = false;
					}
					
					// 允许下次加载
					this.canLoad = true;
				} catch (e) {
					console.error('加载商品列表失败:', e);
					this.canLoad = true;
				} finally {
					this.loading = false;
				}
			},
			
			// 加载更多
			loadMore() {
				if (this.noMore || !this.canLoad) return;
				
				this.page += 1;
				this.goods_getIndexGoodsListByCateId();
			},
			
			// 切换分类
			switchTab(index) {
				if (this.goods_cate_id === index) return;
				
				this.goods_cate_id = index;
				this.page = 1; // 切换分类时重置页码
				this.noMore = false;
				this.products = []; // 清空当前商品列表
				this.goods_getIndexGoodsListByCateId();
				
				// 滚动到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			
			fun(item) {
				uni.navigateTo({
					 url: `/pages/shopingDetails?id=${item.goods_id}`
				})
			},
			
			tiaozhuan() {
				uni.navigateTo({
					url: '/pages/shoppingCart'
				})
			}
		},
		computed: {
			loadText() {
				return this.loading ? '加载中...' : '上拉加载更多';
			}
		}
	}
</script>

<style lang="less" scoped>
	.normal-login-container {
		background-color: #f4f4f4;
		min-height: 100vh;
	}
	.mox{
		width: 100%;
		text-align: center;
		color: #5cab84;
		padding-top: 20px;
		padding-bottom: 20px;
		font-size: 20px;
		font-weight: 600;
		margin-bottom: 20px;
		background: #ffffff;
	}
	.switch-scroll {
		width: 100%;
		white-space: nowrap;
		margin-bottom: 10px;
	}

	.switch {
		display: inline-block;
		width: auto;
		padding: 0 12px;

		div {
			display: inline-block;
			padding: 6px 16px;
			margin-right: 10px;
			font-size: 14px;
			color: #888888;
			border-radius: 20px;
			background: #f5f5f5;

			&.active {
				color: #51a77c;
				background: rgba(81, 167, 124, 0.1);
				font-weight: 500;
			}
		}
	}
	
	/* 商品列表容器样式 */
	.product-list-container {
		background-color: #f4f4f4;
		padding: 10px 0;
		min-height: 50vh;
	}
	
	/* 商品列表样式 */
	.product-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 15px;
		justify-content: space-between;
	}
	
	.product-item {
		width: calc(50% - 8px);
		margin-bottom: 15px;
		border-radius: 12px;
		overflow: hidden;
		background-color: #ffffff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}
	
	.product-image {
		width: 100%;
		height: 150px;
	}
	
	.product-info {
		padding: 10px;
	}
	
	.product-title {
		font-size: 14px;
		color: #333;
		display: block;
		margin-bottom: 5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.product-price {
		font-size: 16px;
		color: #5cab99;
		font-weight: bold;
	}
	
	/* 加载更多提示 */
	.load-more, .no-more {
		width: 100%;
		text-align: center;
		padding: 10px 0;
		color: #999;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.no-more {
		color: #ccc;
	}
	
	/* 加载动画 */
	.loading-icon {
		width: 16px;
		height: 16px;
		border: 2px solid #eee;
		border-top: 2px solid #5cab84;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-right: 8px;
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	/* 定位购物车样式 */
	.cart-fixed {
		position: fixed;
		right: 20px;
		bottom: 20%;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
		z-index: 100;
		
		img {
			width: 30px;
			height: 30px;
		}
		
		.cart-count {
			position: absolute;
			top: -8px;
			right: -8px;
			background: #e63946;
			color: white;
			width: 22px;
			height: 22px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
		}
	}
</style>